<template>
  <div id="barChart"></div>
</template>
<script>
import * as echarts from "echarts";
import{topChart}  from "@/api/user/api";
export default {
  data() {
    return {
      charts: null,
      dataList: [],
      yAxis:[],
      xAxis:[],
    };
  },

  methods: {
    init() {
      this.charts = echarts.init(document.getElementById("barChart"));
    },
    getList() {
      topChart().then(res=>{
        let data=res.data
        this.dataList=data.views
        this.dataList.forEach((item,index,arr)=>{
          this.xAxis[index]=item.name
          this.yAxis[index]=item.views
        })
       
        
        this.initChart();
      })
    },
    initChart() {
      // 创建echarts实例  获取要展示的区域
      // let nameSum = this.dataList
      var option = {
        title: {
          text: "浏览量Top3",
          textStyle: {
            fontWeight: "normal",
            fontSize: 16
          },
          left: "left",
          top: "0%"
        },
        tooltip: {
          show: false,
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          top: "5%",
          x: "right", // 水平居右
          y: "center", // 垂直居中
          orient: "vertical", // 垂直排列
          icon: "roundRect", // 图例icon为圆角矩形
          itemHeight: 12, // 图例icon高度
          itemWidth: 23, // 图例icon宽度
          align: "left", // 图例icon在左侧
          padding: [0, 20, 0, 0],
          textStyle: {
            fontSize: 14, //字体大小
            color: "rgba(20, 20, 20,0.3)", //字体颜色
            padding: [35, 0, 0, 0]
          },

          data: [
            {
              name: this.xAxis[0],
              itemStyle: { color: "#2674e9" },
              textStyle: {
                rich: {
                  sum: {
                    fontSize: 16,
                    padding: [5, 0],
                    color: "#2674e9"
                  }
                }
              }
            },
            {
              name: this.xAxis[1],
              itemStyle: { color: "#0FCD87" },
              textStyle: {
                rich: {
                  sum: {
                    fontSize: 16,
                    padding: [5, 0],
                    color: "#0FCD87"
                  }
                }
              }
            },
            {
              name:this.xAxis[2],
              itemStyle: { color: "#FF6E1E" },
              textStyle: {
                rich: {
                  sum: {
                    fontSize: 16,
                    padding: [5, 0],
                    color: "#FF6E1E"
                  }
                }
              }
            }
          ],
          formatter: (p)=> {
            
            
            for (let i = 0; i < this.xAxis.length; i++) {
              console.log("ddd",p);
              if(p== this.xAxis[i])
              return [p, `{sum|${this.yAxis[i]}}`].join("\n");
            }
          }
        },
        grid: {
          // 让图表占满容器
          top: "25%",
          left: "-40%",
          right: "0%",
          bottom: "0%"
        },
        xAxis: {
          type: "category",
          show: false,
          axisLine: { show: false },
          axisTick: {
            show: false //不显示坐标轴刻度线
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          show: false,
          axisLine: { show: false },
          axisTick: {
            show: false //不显示坐标轴刻度线
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: this.xAxis[0],
            type: "bar",
            barWidth: 44,
            data: [this.yAxis[0]],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#2674e9"
                },
                {
                  offset: 1,
                  color: "rgba(38, 116, 233,0)"
                }
              ])
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#2674e9",
                  fontSize: 14
                }
              }
            }
          },
          {
            name: this.xAxis[1],
            type: "bar",
            barGap: "35%",
            barWidth: 44,
            data: [this.yAxis[1]],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0FCD87"
                },
                {
                  offset: 1,
                  color: "rgba(15, 205, 135,0)"
                }
              ])
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#0FCD87",
                  fontSize: 14
                }
              }
            }
          },
          {
            name: this.xAxis[2],
            type: "bar",
            barWidth: 44,
            data: [this.yAxis[2]],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FF6E1E"
                },
                {
                  offset: 1,
                  color: "rgba(255, 110, 30,0)"
                }
              ])
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#FF6E1E",
                  fontSize: 14
                }
              }
            }
          }
        ]
      };
      window.addEventListener("resize", () => {
        this.charts.resize();
      });
      this.charts.setOption(option);
    }
  },
  mounted() {
    this.init();
    this.getList();
  }
};
</script>
<style scoped>
#barChart {
  width: 100%;
  height: 170px;
}
</style>